<template>
  <div>
    <header>
      <div class="top">
        <div class="lef">
          <van-icon
            class="lef2"
            name="arrow-left"
            size="20px"
            color="#e0e0e0"
            @click="onClickLeft"
          />
        </div>
        <div class="cen">注册</div>
        <div class="rig">
          <router-link to="/login">登录</router-link>
        </div>
      </div>
    </header>

    <section>
      <form action="">

        <div class="callreg">
          <span class="sp1">使用手机注册</span>
        </div>

            <!-- 注册手机号 -->
        <div class="textcall">
            <input class="inputcall" type="text" placeholder="请输入11位手机号" id="phonenumber" 
               v-model="tel"
               :error-message="usertel"
              >
        </div>
            <!-- 验证码 -->
            <div class="yan">
                <input class="yancall" type="text" placeholder="请输入短信验证码" v-model="sms"  error-message="test" >
                <a href="" slot="button" @click="sendCode">{{ buttonmsg }}</a>
            </div>
            <!-- 密码 -->
             <div class="textpass">
                 <input class="inputpass" type="password" placeholder="6-16位登陆密码"
                  v-model="password"
                  error-message="pass" >
           </div>
           <div class="reg2">
                    <input type="submit" value="注册" class="regs"  
                    :disabled="zhud" @click="register"
                    :loading="loading" loading-text="注册..."
                    >
           </div>
          <div class="xieyi">
              点击注册，表示同意《聚美优品用户协议》
          </div>
      </form>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Field,Button,Toast,Divider } from 'vant'

Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)

export default {
  data() {
    return {
        tel:'',
            password:'',
            sms:'',
            buttonmsg:'验证',
            flag:false,
            adminCode:'',
            zhud:false,
            loading:false
            
    };
  },
  computed: {
        usertel () {
            if (this.tel === " "){
                return ''
            }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
                return '手机号格式错误'
            }else {
                return ''
            }
        },
        pass () {
            if (this.password === " "){
                return ''
            }else if(this.password.length<6){
                return '密码不可小于6位'
            }else {
                return ''
            }
        },
        test () {
            if (this.sms === ""){
                return ''
            }else if(this.sms.length !== 5){
                return '验证码格式错误'
            }else {
                return ''
            }
        }
    },
    methods: {
        onClickLeft() {
              window.history.back(-1);
        },
        toLogin () {
           this.$router.replace('/login') 
        },
        sendCode () {
            let time = 4
            let timer
            timer = setInterval(()=>{                           
                time --
                if(time === 0){
                    clearInterval(timer)
                    this.flag=false
                    this.buttonmsg = '点击发送验证码'
                    return
                }
                this.flag = true  
                this.buttonmsg = time + '秒后重新发送' 
                              
            },1000)
            this.getCode()
        },
        getCode () {
            if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel===""){
                Toast('手机号码输入有误')
            }else{
                axios.get('https://www.daxunxun.com/users/sendCode?tel='+this.tel).then(res=>{
                    if(res.data === 1){
                        Toast('用户名已注册，请更改')
                    }else if(res.data === 0){
                        Toast('获取验证码失败')
                    }else{
                        this.adminCode = res.data.code
                        console.log(this.adminCode)
                    }
                })
            }
        },
        register () {
            if (this.tel === '' || this.usertel === '手机号码格式错误') {
                Toast('手机号码输入有误')
                return
            }
            if (this.password === '' || this.pass === '密码格式错误，最少为6位') {
                Toast('密码输入有误')
                return
            }
            if (this.sms === '' || this.sms !== this.adminCode) {
                Toast('验证码输入有误')
                return
            }
            this.reallR()
        },
        reallR () {
            this.zhud=true
            this.loading=true
            axios.post('https://www.daxunxun.com/users/register', {
            username: this.tel,
            password: this.password
        }).then(res=>{
            this.zhud=false
            this.loading=false
            if (res.data === 2) {
                Toast('用户名已注册，请直接登录')
            } else if (res.data === 0) {
                Toast('注册失败')
            } else {
            Toast('注册成功')
            }
        })
        }
    }
}


 

</script>

<style scoped>
header {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
    box-sizing: border-box;
}
.top {
  color: #333;
  height: 44px;
}

.lef {
  position: absolute;
  left: 0;
  width: 92px;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
}
.lef2 {
  color: #333;
  height: 44px;
  line-height: 44px;
  font-weight: 700;
  padding-left: 8px;
}
.cen {
  width: 90px;
  float: left;
  color: #666;
  line-height: 50px;
  position: absolute;
  left: 45%;
  font-size: 19px;
}
.rig {
  position: absolute;
  height: 44px;
  right: 10px;
  box-sizing: border-box;
  color: #333;
  margin-top: 10px;
  font-size: 18px;
}
.rig > a {
  color: #000;
}
 /* 主体 */
  section > form> .callreg{
      position: relative;
      width: 100px;
      height: 58px;
      line-height: 58px;
      text-align: center;
      left: 35%;
      
      
  }
 section > form>.callreg > .sp1{
     color: #999;
 }
 section > form >.textcall,.yan ,.textpass ,.reg2,.xieyi{
    display: flex;
    justify-content: center;
    align-items: center;
 }
 /* 手机号的样式 */
  section > form >.textcall > .inputcall  {
          width: 270px;
          height: 40px;
          color: #999999;
          font-size: 12px;
          text-indent: 15px;
          text-align: left;
          background: #f5f5f5;
          border-radius: 20px;
          border: none;
  }
   section > form >.yan ,.textpass,.reg2{
       margin-top: 20px;
   }
   section > form >.yan> .yancall{
            width: 170px;
          height: 40px;
          color: #999999;
          font-size: 12px;
          text-indent: 15px;
          text-align: left;
          background: #f5f5f5;
          border-radius: 20px;
          border: none;
   }
    section > form >.yan> a{
        margin-left: 5px;
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #feb2c5;
        border:1px solid #feb2c5;
        border-radius: 20px; ;
    }

    /* 密码的样式 */

  section > form  >.textpass> .inputpass  {
          width: 270px;
          height: 40px;
          color: #999999;
          font-size: 12px;
          text-indent: 15px;
          text-align: left;
          background: #f5f5f5;
          border-radius: 20px;
          border: none;
  }
  .regs{
      background: #feb2c5;
      color: #fff;
      width: 270px;
      height: 40px;
      border-radius: 20px;
      border: none;
  }
    /*协议  */
  .xieyi{
      color: #999999;
      height: 36px;
      font-size: 12px;
  }

</style>